<template>
  <el-icon
    :size="size"
    :color="color">
    <svg
      :class="['svg-icon']"
      aria-hidden="true">
      <use :xlink:href="symbolId" />
    </svg>
  </el-icon>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: ''
  },
  color: {
    type: String,
    default: ''
  }
})

const symbolId = computed(() => `#icon-${props.name}`)
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>
